<div class="namespace-provision-page">
  <div class="container-fluid main">
    <div class="row">
      <div class="col-sm-8">
        <h2>{{ 'RENEW_NS_TITLE' | translate }}</h2>
      </div>
    </div>

    <div class="row">
      <div class="col-md-9 col-lg-7">
        <div class="panel-heading">
          <div class="tabDescription">
            <span ng-show="!$ctrl.formData.isMultisig">{{ 'NAMESPACE_PROVISION_NAME' | translate }}</span>
            <span ng-show="$ctrl.formData.isMultisig">{{ 'NAMESPACE_PROVISION_MULTISIG_NAME' | translate }}</span>
          </div>
          <ul class="nav nav-tabs">
            <li ng-class="$ctrl.formData.isMultisig ? '' : 'active'"><a ng-click="$ctrl.formData.isMultisig = false;$ctrl.updateCurrentAccountNS();">{{ 'GENERAL_TAB_NORMAL' | translate }}</a></li>
            <li ng-show="$ctrl._DataBridge.accountData.meta.cosignatoryOf.length" ng-class="$ctrl.formData.isMultisig ? 'active' : ''"><a ng-click="$ctrl.formData.isMultisig = true;$ctrl.updateCurrentAccountNS();">{{ 'GENERAL_TAB_MULTISIG' | translate }}</a></li>
          </ul>
        </div>

        <div class="panel-body">
          <fieldset>
            <!-- MULTISIG ACCOUNT ADDRESS -->
            <fieldset class="form-group" ng-show="$ctrl.formData.isMultisig">
              <div class="input-group">
                <span class="input-group-btn">
                  <label>{{ 'GENERAL_MULTISIG_ACCOUNT' | translate }}: </label>
                </span>
                <select class="form-control" ng-options="(acc.address | fmtContact:$ctrl.contacts) for acc in $ctrl._DataBridge.accountData.meta.cosignatoryOf track by acc.address" ng-model="$ctrl.formData.multisigAccount" ng-change="$ctrl.updateCurrentAccountNS();">
               </select>
              </div>
            </fieldset>
            <!-- MULTISIG ACCOUNT BALANCE -->
            <fieldset class="form-group" ng-show="$ctrl.formData.multisigAccount && $ctrl.formData.isMultisig">
              <div class="input-group">
                <span class="input-group-btn">
                  <label>{{ 'FORM_SIDE_BTN_BALANCE' | translate }}</label>
                </span>
                <div class="form-control formFloat" readOnly>
                  <input class="readOnly" type="text" value="{{ ($ctrl.formData.multisigAccount.balance | fmtNemValue)[0] }}.{{ ($ctrl.formData.multisigAccount.balance | fmtNemValue)[1] }}" readOnly/>
                  <label class="floatRight"><small>XEM</small></label>
                </div>
              </div>
            </fieldset>
            <!-- LIST OF RENEWABLE NAMESPACES -->
            <fieldset class="form-group" ng-show="$ctrl.needRenew">
              <div class="input-group">
                <span class="input-group-btn">
                  <label>{{ 'GENERAL_NAMESPACES' | translate }}: </label>
                </span>
                <select class="form-control" ng-options="namespace.fqn as namespace.fqn for namespace in $ctrl.cleanArray($ctrl._DataBridge.namespaceOwned[$ctrl.currentAccount])" ng-model="$ctrl.formData.namespaceName" ng-change="$ctrl.updateFees()">
                </select>
              </div>
            </fieldset>
            <!-- TEXT IF NO RENEWABLE NAMESPACES -->
            <fieldset class="form-group" ng-show="!$ctrl.needRenew">
              <div class="input-group">
                <span class="input-group-btn">
                  <label>{{ 'GENERAL_NAMESPACES' | translate }}: </label>
                </span>
                <input class="form-control" value="{{ 'RENEW_NS_NONE' | translate }}" disabled />
              </div>
            </fieldset>
            <!-- NAMESPACE SINK ADDRESS -->
            <fieldset class="form-group">
              <div class="input-group">
                <span class="input-group-btn">
                  <label>{{ 'GENERAL_SINK_ADDRESS' | translate }}: </label>
                </span>
                <input type="text" class="form-control" ng-model="$ctrl.formData.rentalFeeSink" readOnly>
              </div>
            </fieldset>
            <!-- TRANSACTION FEE -->
            <div class="row" class="dualFees">
              <div class="col-sm-6">
                <fieldset class="form-group">
                  <div class="input-group">
                    <span class="input-group-btn">
                      <label>{{ 'FORM_SIDE_BTN_TX_FEE' | translate }}: </label>
                    </span>
                    <div class="form-control formFloat" readOnly>
                      <span class="feeAmount">
                        <span ng-show="$ctrl.formData.isMultisig">{{($ctrl.formData.innerFee | fmtNemValue)[0]}}.{{($ctrl.formData.innerFee | fmtNemValue)[1]}} +</span>
                        <span>{{($ctrl.formData.fee | fmtNemValue)[0]}}.{{($ctrl.formData.fee | fmtNemValue)[1]}}</span>
                      </span>
                      <label class="floatRight"><small>XEM</small></label>
                    </div>
                  </div>
                </fieldset>
              </div>
              <!-- RENTAL FEE-->
              <div class="col-sm-6">
                <fieldset class="form-group">
                  <div class="input-group">
                    <span class="input-group-btn">
                      <label>{{ 'FORM_SIDE_BTN_RENTAL_FEE' | translate }}:</label>
                    </span>
                    <div class="form-control formFloat" readOnly>
                      <span class="feeAmount">
                        <span>{{($ctrl.formData.rentalFee | fmtNemValue)[0]}}.{{($ctrl.formData.rentalFee | fmtNemValue)[1]}}</span>
                      </span>
                      <label class="floatRight"><small>XEM</small></label>
                    </div>
                  </div>
                </fieldset>
              </div>
            </div>
            <!-- PASSWORD FIELD -->
            <fieldset class="form-group">
              <div class="input-group">
                <span class="input-group-btn">
                  <label ng-class="!$ctrl.common.password.length ? 'has-error' : ''">{{ 'FORM_PASSWORD' | translate }}:</label>
                </span>
                <input class="form-control" type="password" placeholder="{{ 'FORM_PASSWORD_FIELD_PLACEHOLDER' | translate }}" ng-model="$ctrl.common.password" ng-class="!$ctrl.common.password.length ? 'has-error' : ''"/>
              </div>
            </fieldset>
            <!-- SEND TRANSACTION -->
            <button class="btn btn-success pull-xs-right"
              type="submit" ng-disabled="$ctrl.okPressed || !$ctrl.common.password.length || !$ctrl.formData.namespaceName.length || !$ctrl.namespaceIsValid($ctrl.formData.namespaceName)" ng-click="$ctrl.send()">
              <i class="fa fa-angle-double-right"></i> {{ 'GENERAL_RENEW' | translate }}
            </button>
          </fieldset>
        </div>
      </div>

      <div class="col-md-3 col-lg-5">
        <div class="panel-heading">
          <h3>{{ 'RENEW_NS_INFORMATION_TITLE' | translate }}</h3>
        </div>
        <div class="panel-body">
          <h5>{{ 'RENEW_NS_INFORMATION_TITLE_1' | translate }}</h5>
          <p>{{ 'RENEW_NS_INFORMATION_1' | translate }}</p>
          <h5>{{ 'RENEW_NS_INFORMATION_TITLE_2' | translate }}</h5>
          <p>{{ 'RENEW_NS_INFORMATION_2' | translate }}</p>
          <h5>{{ 'RENEW_NS_INFORMATION_TITLE_3' | translate }}</h5>
          <p>{{ 'RENEW_NS_INFORMATION_3' | translate }}</p>
          <p>{{ 'RENEW_NS_INFORMATION_4' | translate }}</p>
        </div>
      </div>
    </div>
  </div>
</div>
